@import "_common"

zoom()
    -webkit-transform scale(1.05)
    -moz-transform scale(1.05)
    -ms-transform scale(1.05)
    transform scale(1.05)

html, body
    height 100%

#nav, #translations
    list-style-type none
    text-align center
    padding 0
    margin 0
    li
        display inline-block
        position relative
        line-height 40px
        &:last-child .nav-link
            margin-right 0

#translations
    margin-bottom 3em
    .delimiter
        color $light
        margin 0 5px
    .nav-link
        margin 0

.nav-link
    color $light
    padding-bottom 3px
    margin 0 1.5em
    &:first-child
        margin-left 0
    &:hover, &.current
        border-bottom 3px solid $green

#logo
    display block
    margin 0 auto
    width 200px

#logo-wrap
    margin 3.5em 0 4em

#hero
    text-align center
    height 100%
    min-height 720px
    position relative
    .inner
        height 640px
        width 100%
        position absolute
        top 50%
        margin-top -340px
        left 0
    h1
        font-family $logo-font
        font-weight 300
        font-size 4em
        margin 0
    .warning
        color $light
    .desc
        max-width 800px
        padding 0 20px
        text-align center
        margin 1.5em auto
        color $light
    .down
        position absolute
        bottom 0
        width 100%
        left 0
        padding 1.5em 0
        img
            width 20px  
    a.button
        width 280px
        margin .5em

#social
    text-align center
    list-style-type none
    margin 0 auto
    padding 0
    margin 1.5em auto
    li
        display inline-block
        margin 0 5px
        vertical-align middle
        &.last
            margin-left -2px

#example
    //background-color #f3f3f3
    text-align center
    padding 20px
    max-width 1200px
    margin 0 auto 3em
    h2
        margin-bottom 1.5em
    code, pre
        background-color transparent
    figure.highlight
        margin 0
        box-shadow none
        background-color transparent
    .sign
        display inline-block
        height 10em
        line-height 9em
        padding 0 .5em
        font-weight 600
        color $light
    .block
        text-align left
        display inline-block
        width 28%
        height 10em
        vertical-align top
        background-color #f9f9f9
        border-radius 2px
        box-shadow 0 1px 2px rgba(0,0,0,.125)
    #demo
        padding 0 20px
        input
            font-size .75em
            border 1px solid #ccc
            padding 4px 8px
            border-radius 2px
            font-family $body-font
            &:focus
                outline none
                border-color $green

#features
    padding 3em 0
    text-align center
    background-color #f9f9f9
    .cool
        font-size 1.8em
        text-align center
        margin-top 1em
        color $light
    .feats
        max-width 1200px
        margin 0 auto
    .feat
        box-sizing border-box
        -moz-box-sizing border-box
        display inline-block
        text-align left
        vertical-align top
        width 280px
        margin 40px
        h2
            color $medium
            line-height 40px
            margin-bottom 0
        p
            color $light
            padding-left 52px
            margin .4em 0
        a
            color $green
            font-weight 600
    .icon
        display inline-block
        vertical-align middle
        position relative
        top -3px
        width 40px
        height 40px
        margin-right 12px
        background url(../images/icons.png)
        background-size 240px 40px
        &.fast
            background-position -40px 0
        &.compact
            background-position -80px 0
        &.powerful
            background-position -120px 0
        &.composable
            background-position -160px 0
        &.module
            background-position -200px 0

#why
    padding 4em 0
    background-color $green
    color #fff
    h2
        margin-top 0
        color #fff
        font-size 1.5em
        text-align center
    ul
        line-height 1.8em
        font-size 1.15em
        width 320px
        margin 0 auto
        padding 0
        list-style-type none
        li:before
            content ""
            display inline-block
            width 24px
            height 24px
            background url(../images/check.png) center center no-repeat
            background-size 24px 24px
            margin-right 10px
            position relative
            top 4px

#footer
    text-align center
    color #fff
    padding 4em 0
    background-color #7f8c8d
    .avatar
        width 100px
        border-radius 100%
        margin 2.5em 0 1em
    a
        color #fff
        text-decoration underline
        &.start
            font-size 1.2em
            text-decoration none
            text-transform uppercase
            letter-spacing 1px
            border 1px solid #fff
            display inline-block
            padding 12px 20px
            border-radius 25px
            transition all .15s ease
            margin-bottom 2em
            &:hover
                background-color #fff
                color #7f8c8d
                zoom()
    p
        margin .3em 0

#main
    display none

@media screen and (max-width: 480px)
    body
        font-size 14px
    #nav
        margin 2em 1.8em 0
    #translations
        margin-bottom 2em
    #logo
        width 120px
    .nav-link
        font-size .85em
        margin 0 .5em
    .divider
        font-size 1.2em
        margin 2.5em 1em
    #hero
        min-height 560px
        .inner
            height 600px
            margin-top -300px
        h1
            font-size 2em
            font-weight 400
        .buttons
            max-width 300px
            margin 1em auto
        a.button
            width 260px
            font-size .8em
            margin .5em 0
        .desc
            max-width 300px
        .warning, .desc
            font-size .85em
            margin 1em auto
            br
                display none
        .down
            display none
    #social
        max-width 340px
        margin 1.2em auto
    .cool
        margin-top 0
    #features .feat
        font-size 14px
        margin .8em 0
        width 250px
    #why
        ul
            width 280px
            font-size 1.1em
        h2
            font-size 1.4em
    #ad
        position static
        .carbon-img, .carbon-text, .carbon-poweredby
            display inline-block

@media screen and (max-width: 860px)
    #features, #hero
        font-size 16px
    #example
        .block
            display block
            width auto
            height auto
        #demo
            padding 5px 20px 20px
        .sign
            display block
            height 1em
            line-height 1em
            padding .5em 0
